<template>
<view class="search">
	<view class="head">
		<uni-icons type="back" size="22px" color="#1F8AF3" style="margin-top: 14px; margin-left: 5px; font-weight: 700;" @click="toHome()"></uni-icons>
		<view class="search-bar-box">
		<uni-icons type="search" size="13px" color="#C7C7C9" style="margin-top: 10px;margin-left: 9px;"></uni-icons>
		<input type="text" value="" v-model="keyword" placeholder="请输入专业课名称" class="search-text" maxlength="10" focus/>
		<uni-icons type="clear" size="13px" color="#8F8E94" style="margin-top: 10px;margin-right: 8px;" @click="clear('keyword')"></uni-icons>
		</view>
		<button type="primary" class="button-btn" @click="searchBtn('keyword')">搜索</button>
	</view>

	<view class="search-item">
	  <view class="search-name">
		  <view style="margin-right: 70%; font-weight: 700; font-size: 14px;">搜索历史</view>
		  <uni-icons type="trash-filled" size="17px" style="margin-right: 21px; color: #888889;" @click="clearHistory()"></uni-icons>
	  </view>
	  <view class="search-name" v-if="searchData.length > 0">
		  <view class="search-list" v-for="(item,index) in searchResult" :key="index" @tap="toSearchList(item)">
			{{item}}
		  </view>
	  </view>
	<view v-else class="search-end">暂无搜索记录</view>
	  <view class="search-name">
		  <view style="font-weight: 700; font-size: 14px;">为你推荐</view>
	  </view>
	  <view class="search-name">
	  		  <view class="search-list"
				v-for="(item,index) in searchTJ"
				:key="index"
			  >
				{{item.name}}
			  </view>
	  </view>
	</view>
</view>

</template>

<script src="js/jquery-3.7.0.js" type="text/javascript" charest="utf-8"></script>
<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				keyword:"",   //输入的关键词
				searchData:[],  //搜索过的记录
				searchTJ:[
					{
						name:"数据结构"
					},
					{
						name:"编译原理"
					},
					{
						name:"哈理工计算机专业课"
					}
				],
			}
		},
		//模糊搜索
		computed:{
			searchResult(){
			    if(this.keyword){
			        return this.searchData.filter((value)=>{
			            return value.includes(this.keyword);
			        });
			    }else{
			        return this.searchData;

			    }
			}

		},
		//监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			this.search();
		},
		onLoad() {
			uni.getStorage({
				key:"searchData",
				success:(res) =>{
					this.searchData=JSON.parse(res.data);
				}
			})
		},

		methods:{
			input(e) {
				// 输入结束后，将值存入historyList
				this.searchVal = e;
				// console.log(e)
			},
			toHome(){
				// console.log(111)
				uni.switchTab({
					url:'/pages/index/index',
				})
			},
			clear(e){
				console.log("clearIn")
				this[e]=""
			},
			searchBtn() {
				if(this.keyword===""){
					return uni.showToast({
						title:"关键词不能为空",
						icon:"none"
					})
				}else{
					this.toSearchList(this.keyword)
					// uni.navigateTo({
					// 	url:"/pages/profession/searchResult?keyword="+this.keyword+""
					// })
				}
				this.addSearch()
				this.getData()
			},
			//获取接口数据
			getData(){
				// axios.get("/api/goods/search?key=408")
				// 	.then(res=>{

				// 		console.log(res)
				// 	})
				//两者axios.get()传参写法

        //mgl添加
        let that = this
				this.$axios.get("/goods/search",{
					params:{
						key:that.keyword,
					},
					headers:{
						'token':localStorage.getItem('token')
          }
				}).then(res=>{
						// console.log("keyword:"+this.keyword)
						// console.log("id:"+res.data.data[0].id)

						var arr =[];
						for (var i = 0;i<res.data.data.length;i++) {

							if(res.data.data[i].name.indexOf(this.keyword)>=0){
								arr.push(res.data.data[i]);
							}
						}
						// if(arr.length == 0){
						// 	console.log("暂无此专业课");
						// }else{
						// 	console.log(arr);
						// }
						
						
					}).catch(()=>{

						uni.showToast({
							title:"请求失败",
							icon:"none"
						})
					})

			},
			//记录最近搜索词
			addSearch(){
				let idx = this.searchData.indexOf(this.keyword)
				if(idx<0){
					this.searchData.unshift(this.keyword)
				}else{
					this.searchData.unshift(this.searchData.splice(idx,1)[0])
				}

				// console.log(this.keyword)
				// console.log(this.searchData)
				uni.setStorage({
					key:"searchData",
					data:JSON.stringify(this.searchData)
				})
			},
			//清除搜索记录
			clearHistory(){
				uni.showModal({
					title:"重要提示",
					content:"是否要清除搜索记录",
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if(res.confirm){
							uni.removeStorage({
								key:"searchData"
							})
							this.searchData=[];
						}
					}

				})
			},
			//点击搜索记录进入页面
			toSearchList(item){
				uni.navigateTo({
					url:"/pages/index/searchResult?keyword="+item+""
				})
				// console.log("item:"+item);
			}
		}
	}
</script>

<style>
	.search{
		/* background-color: #EEEEEF; */
	}
	// 搜索框
	.search-bar{
		width: 100%;
		height: 100rpx;
		margin-top: 2%;
	}
	.search-bar-box{
		display: flex;
		margin: 0 auto;
		width: 75%;
		height: 37px;
		background-color: #FFFFFF;
		border:5rpx solid #EEEEEF;
		border-radius: 12px;
		/* background-color: rgba(255, 255, 255, 1); */
		margin-top: 6px;
	}
	.search-span{
		width: 100rpx;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}
	.search-text{
		width: 100%;
		margin-top: 6px;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}
	.search-btn{
		background-color: #00a8cc; /* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}

	.head{
		display: flex;
		justify-content: flex-start;
		background-color: #EEEEEF;
	}
	/deep/.uni-searchbar__box[data-v-180dbe05]{
		height: 34px;
		justify-content: flex-start;
	}
	.uni-searchbar[data-v-180dbe05]{
		width: 85%;
	}
	.button-btn{
		margin-top: 9px;
		width: 60px;
		height: 34px;
		font-size: 14px;
		border-radius: 12px;
		margin-right: 2px;
	}
	.search-item{
		margin-left: 11px;
	}
	.search-name{
		display: flex;
		justify-content: flex-start;
		margin-top: 14px;

	}
	.search-list{
		margin-right: 10px;
		color: #888889;
		font-size: 12px;
	}
	.search-end{
		text-align: center;
	}
</style>
